<template>
	<div>
		<van-tabs @click-tab="handleClickTab" v-model:active="tabActive">
			<van-tab title="选车">内容 1</van-tab>
			<van-tab title="新能源">
				<van-index-bar>
					<div v-for="(v, i) in carList" :key="i">
						<van-index-anchor :index="v.word" />
						<van-cell v-for="(item, index) in v.children" :key="index" :title="item.Name" :icon="item.CoverPhoto" @click="show=true;carName=item.Name"/>
					</div>
				</van-index-bar>
			</van-tab>
			<van-tab title="二手车">内容 3</van-tab>
			<van-tab title="买车">内容 4</van-tab>
		</van-tabs>
		<van-popup v-model:show="show" position="right" :style="{ height: '100vh', width: '280px' }">
		<h2>{{ carName }}</h2>
		</van-popup>
	</div>
</template>


<script lang="ts" setup>
import { useRouter } from 'vue-router'
import axios from 'axios'
import { onMounted, computed, ref } from 'vue'
import { useStore } from 'vuex'
import { RootState } from '@/store'
// 引入路由和仓库
const router = useRouter()
const store = useStore<RootState>()
// tab切换
const tabActive = 1
const handleClickTab = (params: { title: string }) => {
	if (params.title === '二手车') router.push('/old/car')
}
// 是否显示弹出层
const show = ref(false)
// 弹出层车名字
const carName = ref('')

// 获取仓库数据
const carList = computed(() => store.state.selectCarList)

// 分发action 
// 获取后端数据
onMounted(() => { store.dispatch('fetchSelectCarList') })
</script>